<template>
  <view class="news-item" @click="toNewsDetails">
    <view class="cover-img">
      <TImage
        :src="item.coverUrl"
        width="100%"
        mode="widthFix"
        height="fit-content"
        border-radius="10rpx"
      ></TImage>
    </view>
    <view class="info">
      <view class="info-title">
        <text class="ov-2 flex-1">{{ item.title }}</text>
        <view
          v-if="item.linkType === InformationLinkTypeEnum.FILE"
          class="download-file"
          @click.stop="handleDownloadFile"
        >
          <text>查看文件</text>
        </view>
      </view>
      <view class="info-number">
        <text>{{ item.publicTime }}</text>
        <view>
          <text class="ali-icon">&#xe6cf;</text>
          <text>{{ pageview }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { computed, inject, type PropType, type Ref, ref } from 'vue';
  import { InformationLinkTypeEnum, type InformationPageListResData } from '@/api/home/types';
  import { navigateTo } from '@/router';
  import TImage from '@/components/TImage/index.vue';
  import { useUpload } from '@/hooks/core/useUpload';
  import { Toast } from '@/utils';

  const { openDocument } = useUpload();

  const props = defineProps({
    item: {
      type: Object as PropType<InformationPageListResData>,
      required: true,
    },
  });

  const refreshNum = ref(0);
  const pageview = computed(() => props.item.showBrowseNum + refreshNum.value);

  const tabTitle = inject<Ref<string>>('tabTitle');

  function handleDownloadFile() {
    if (!props.item.havePermission) {
      uni.showModal({
        title: '提示',
        content: '您暂无查阅/下载权限',
        showCancel: false,
      });
      return;
    }

    if (props.item.fileUrl) {
      openDocument({ filePath: props.item.fileUrl });
    } else {
      Toast('文件地址不存在');
    }
  }

  /**
   * 跳转资讯详情
   * @param v
   */
  function toNewsDetails() {
    const itme = props.item;
    if (itme) {
      switch (itme.linkType) {
        case InformationLinkTypeEnum.TEXT:
        case null:
          navigateTo({
            name: 'richDetails',
            options: {
              pageTitle: '文章详情',
              id: itme.id,
              refresh: () => refreshNum.value++,
            },
          });
          break;
        case InformationLinkTypeEnum.LINK:
          navigateTo({ name: 'weChatOfficialAccountLink', options: { id: itme.id } });
          break;
        case InformationLinkTypeEnum.FILE:
          handleDownloadFile();
          break;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .news-item {
    display: flex;
    // height: 170rpx;
    justify-content: space-between;
    background-color: #fff;
    padding-bottom: 30rpx;
    .cover-img {
      width: 200rpx;
      flex-shrink: 0;
      border-radius: 10rpx;
      overflow: hidden;
      margin-right: 30rpx;
    }

    .info {
      display: flex;
      flex-direction: column;
      flex: 1;

      &-title {
        font-size: 28rpx;
        line-height: 34rpx;
        max-height: 68rpx;
        font-weight: bolder;
        display: flex;
        .download-file {
          height: 48rpx;
          line-height: 48rpx;
          font-size: 24rpx;
          border-radius: 24rpx;
          border: 1px solid #2878ff;
          color: #2878ff;
          padding: 0 16rpx;
          flex-shrink: 0;
          margin-left: 24rpx;
        }
      }

      &-des {
        color: #aaabab;
        font-size: 24rpx;
      }

      &-number {
        color: #808080;
        font-size: 24rpx;
        flex: 1;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;

        .ali-icon {
          margin-right: 5rpx;
        }
      }
    }
  }
</style>
